<template>
	<view>
		<vol-alert>
			<view>表格支持水平或列表显示、事件绑定、数据源自动转换、行格式化、自动分页，见table2.vue页面</view>
		</vol-alert>
		<vol-table2 :url="tableUrl" @rowButtons="rowButtons" @rowButtonClick="rowButtonClick" @rowClick="rowClick"
			:defaultLoadPage="load" @loadBefore="loadBefore" :height="tableHeight" :titleField="titleField"
			:index="rowIndex" @loadAfter="loadAfter" ref="table" :direction="direction" @formatter="formatter"
			:columns.sync="columns" :textInline="textInline">
		</vol-table2>
	</view>
</template>
<!-- pageNum -->
<!-- pageSize -->
<script>
	export default {
		data() {
			return {
				load: true, //默认是否加载数据
				rowIndex: true, //显示行号
				titleField: 'id', //列表的标题字段
				tableUrl: "wechat/student/list",
				//设置table为水平显示或者list列表显示'horizontal'//list
				direction: "list",
				tableHeight: 0, //表格高度，默认100%高度
				textInline: false, //表格内容超出是否换行
				columns: [{
						field: 'studentName',
						title: '学员姓名',
						 
					},
					{
						field: 'studentPhone',
						title: '电话号码'
					},
					{
						field: 'studentArea',
						title: '家教区域',
						// formatter: true
					},
					 {
					 	field: 'studentTeachingMethod',
					 	title: '家教方式',
					 	// formatter: true
					 },
					{
						field: 'price',
						title: '家教价格',
					 
					},
					{
						field: 'studentDescribe',
						title: '学员介绍',
						type: 'textarea',
						width: 180
					},
					{
						field: 'teacherRequirements',
						title: '教师要求',
						type: 'textarea',
						width: 80
					},
					// {
					// 	field: 'studentTime',
					// 	title: '家教时间',
					// 	type: 'img',
					// 	width: 50
					// },
					{
						field: 'studentTime',
						title: '家教时间'
					},
					{
						field: 'remark1',
						title: '申请时间',
						 
					}
				]
			}
		},
		onLoad() {
			let _this = this;
			uni.getSystemInfo({
				success: function(res) {
					_this.tableHeight = res.windowHeight - 70;
				}
			});
		},
		methods: {
			formatter(row, column, index, callback) { //格式化单元格数据
				if (column.field == 'UserName') {
					return callback('<a style="color:red;">' + row.UserName + '</a>')
				}
				return callback(row[column.field])
			},
			rowClick(index, row) {
				this.$toast(`点击了第${index}行`)
			},
			loadAfter() {

			},
			loadBefore(params, callback) {
				callback(true);
			},
			rowButtons(index, row, callback) { //列表显示的按钮
				//if(row.xx=='')
				//自定义按钮,仅onInited中设置：this.direction = "list"后生效
				let buttons = [{
					text: "联系学员",
					icon: "plus",
					type: "primary",
					shape: "circle",
					//disabled: true
				} ];
				callback(buttons);
			},
			rowButtonClick(btn, index, row) { //列表显示的按钮点击事件
				if (btn.text == '联系学员') {
					this.$toast('联系学员')
				} else  {
					this.$toast('测试按钮')
				}
			},
		}
	}
</script>

<style>

</style>
